<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <!--引入富文本编辑器css-->
    <link href="https://cdn.staticfile.org/wangeditor5/5.1.23/css/style.min.css" rel="stylesheet">

    <style>
        .center{
            width: 1200px;
            margin: 0 auto;
        }
        #footer_center p{
            margin: 0;
        }
        #footer_center h3{
            color: white;
        }
        body{
            background-color: rgb(241,242,243);
        }
        .el-header{
            background-color: white;
        }
    </style>
</head>
<body>
<div id="app" >
    <el-container>
        <my-header></my-header>
        <el-main class="center" >
            <el-row gutter="20">
                <el-col span="4">

                    <el-card style="height: 500px">
                        <p @click="location.href='personal.html'">个人信息</p>
                        <p style="color: orange" >稿件管理</p>
                    </el-card>
                </el-col>
                <el-col span="20">
                    <el-card>
                        <!--标签页卡开始-->
                        <el-tabs v-model="c.type"  type="card" @tab-click="handleClick">
                            <el-tab-pane :disabled="isEdit" label="文章" name="1"></el-tab-pane>
                            <el-tab-pane :disabled="isEdit" label="视频" name="2"></el-tab-pane>
                        </el-tabs>
                        <!--标签页卡结束-->
                        <!--发布文章表单开始-->
                        <el-form label-width="100px">
                            <el-form-item label="文章标题">
                                <el-input style="width: 200px" v-model="c.title"
                                        placeholder="请输入标题"></el-input>
                            </el-form-item>
                            <el-form-item label="文章分类">
                                <el-select v-model="c.categoryId">
                                    <el-option v-for="cat in categoryArr"
                                               :label="cat.name" :value="cat.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="封面">
                                <img v-if="isEdit" :src="oldImgUrl"
                                     style="width: 145px;height: 145px;">
                                <el-upload
                                        action="/v1/upload"
                                        name="file"
                                        limit="1"
                                        list-type="picture-card"
                                        :on-success="handleSuccess"
                                        :on-preview="handlePictureCardPreview"
                                        :on-remove="handleRemove">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisible">
                                    <img width="100%" :src="dialogImageUrl" alt="">
                                </el-dialog>
                            </el-form-item>
                            <el-form-item v-show="c.type==2" label="视频简介">
                            <el-input
                                    v-show="c.type==2"
                                    type="textarea"
                                    autosize
                                    placeholder="请输入100字以内的内容"
                                    v-model="c.videoDescribe">
                            </el-input>
                            </el-form-item>
                            <el-form-item v-show="c.type==2" label="文章视频">
                                <video v-if="isEdit" :src="c.videoUrl"
                                       muted autoplay controls style="width: 200px; height: 150px;">
                                    您的浏览器不支持播放此视频.
                                </video>
                                <el-upload style="width: 300px"
                                        action="/v1/upload"
                                        accept="video/mp4,video/x-m4v,video/*"
                                        name="file"
                                        limit="1"
                                        :on-success="handleSuccess"
                                        :on-preview="handlePictureCardPreview"
                                        :on-remove="handleRemove">
                                    <el-button type="primary">点击上传</el-button>
                                    <div>只能上传mp4文件,且不超过100MB</div>
                                </el-upload>
                            </el-form-item>
                            <el-form-item v-show="c.type!=2" label="文章内容">
                                <div style="border: 1px solid #ccc">
                                    <div id="toolbar-container" style="border-bottom: 1px solid #ccc;"><!-- 工具栏 --></div>
                                    <div id="editor-container" style="height: 300px;"><!-- 编辑器 --></div>
                                </div>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="post()">{{isEdit?"修改":"发布"}}</el-button>
                            </el-form-item>

                        </el-form>

                        <!--发布文章表单结束-->

                    </el-card>
                </el-col>
            </el-row>
        </el-main>
        <el-footer style="height: 350px;background-color: darkgrey;padding:50px 0">
            <my-footer></my-footer>
        </el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入富文本编辑器js-->
<script src="https://cdn.staticfile.org/wangeditor5/5.1.23/index.min.js"></script>
<!--引入Axios-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!--引入自己的js文件-->
<script src="js/my-header.js"></script>
<script src="js/my-footer.js"></script>

<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                oldImgUrl:"",
                isEdit:false,
                dialogImageUrl: '',
                dialogVisible: false,
                categoryArr:[],
                c:{
                    title:"", imgUrl:"",content:"",videoUrl:"",categoryId:"",
                    type:"1",videoDescribe:""
                }
            }
        },
        methods: {
            post(){
                if (v.c.type==2&&v.c.videoUrl==""){
                    v.$message.error("请选择视频文件!");
                    return;
                }
              if (v.c.imgUrl==""){
                  v.$message.error("请选择一张封面图!");
                  return;
              }
              if (v.c.categoryId==null||v.c.categoryId==""){
                  v.$message.error("请选择分类!");
                  return;
              }
              //设置作者id
              v.c.createBy = JSON.parse(localStorage.user).id;
              //设置摘要  slice(起始位置,结束位置)
              v.c.brief = editor.getText().slice(0,100);
              //发出请求
                axios.post("/v1/contents/add-new",v.c).then(function (response) {
                    if (response.data.code==1){
                        location.href="/articleManagement.html";
                        v.$message.success("发布完成!");
                    }
                })
            },
            handleClick(tab, event) {
                //清空富文本编辑器里面的内容
                editor.setHtml("");
                axios.get("/v1/categories/"+v.c.type+"/sub").then(function (response) {
                    if (response.data.code==1){
                        v.categoryArr = response.data.data;
                        v.c.categoryId=null;
                    }
                })
            },
            handleSuccess(response, file, fileList) {
                console.log(file);
                if (file.raw.type.includes("image")){
                    //把上传图片完成之后 得到的图片路径用变量记录
                    v.c.imgUrl = response.data;
                }else{
                    v.c.videoUrl = response.data;
                }
            },
            handleRemove(file, fileList) {
                //判断删除的是图片还是视频
                if (file.raw.type.includes("image")){
                    v.c.imgUrl="";
                }else{
                    v.c.videoUrl = "";
                }
                //发出删除文件的请求   file.response上传成功时服务器响应的内容ResultVO
                console.log(file.response);
                axios.get("/v1/upload/remove?url=" + file.response.data).then(function () {
                    console.log("服务器文件删除完成!");
                })
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            loadCategories(type){
                axios.get("/v1/categories/"+type+"/sub").then(function (response) {
                    if (response.data.code==1){
                        v.categoryArr = response.data.data;
                    }
                })
            }
        },
        created:function () {
            if (location.search.indexOf("id")!=-1){//包含id 代表编辑
                this.isEdit = true;
                let id = location.search.split("=")[1];
                //通过地址栏中id请求内容详情
                axios.get("/v1/contents/"+id+"/edit").then(function (response) {
                    if (response.data.code==1){
                        v.c = response.data.data;
                        //更新富文本编辑器内容
                        editor.setHtml(v.c.content);
                        //给单独的变量赋值,让页面中的图片标签和oldImgUrl绑定
                        v.oldImgUrl = v.c.imgUrl;
                        //请求当前编辑内容类型下的所有分类
                        //此处是发完请求回调回来的方法, 此处的this和v不是同一个对象
                        //this代表的window对象,访问Vue对象中的方法时使用v
                        v.loadCategories(v.c.type);
                    }else if (response.data.code == 1005) {
                        alert("无权修改该内容");
                        location.href = "/contentIndex.html"
                    }
                })
            }else{//代表发布
                //如果是发布的话, 地址栏中会包含type    ?type=3
                this.c.type = location.search.split("=")[1];
                //请求type对应的所有分类
                this.loadCategories(this.c.type);
            }

        }
    })


    /**********富文本编辑器相关js开始***********/
    const { createEditor, createToolbar } = window.wangEditor
    const editorConfig = {
        placeholder: '请填写详情...',
        MENU_CONF:{},
        onChange(editor) {
            const html = editor.getHtml();
            console.log('editor content', html);
            //当富文本编辑器里面的值发生改变时 把值赋值给内容对象
            v.c.content = html;
        },

    };
    editorConfig.MENU_CONF['uploadImage']={
        fieldName:'file',
        server:'/v1/upload/user',
        maxFileSize: 6 * 1024 * 1024,
        maxNumberOfFiles: 200,
    };

    editorConfig.MENU_CONF['uploadVideo']={
        fieldName:'file',
        server:'/v1/upload/user',
        maxFileSize: 500 * 1024 * 1024,
        maxNumberOfFiles: 1,
    };

    const editor = createEditor({
        selector: '#editor-container',
        html: '<p><br></p>',
        config: editorConfig,
        mode: 'simple',
    })
    const toolbarConfig = {}
    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'simple',
    })
    /**********富文本编辑器相关js结束***********/
</script>
</html>